<template>
    <div style="height: 100%;width: 100%">
        <div class="header">
            <el-button type="primary" icon="el-icon-edit" @click="add">新增</el-button>
        </div>
        <div class="main">
            <div class="table">
                <vue-scroll>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%;max-width:1600px;height: 100%;padding: 15px 20px;border-radius: 5px;box-shadow: 1px 1px 5px #ccc;">
                        <el-table-column
                                type="index"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="课程名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="classtime"
                                label="课时"
                                width="80">
                        </el-table-column>

                        <el-table-column
                                prop="start"
                                width="100"
                                label="开始时间">
                        </el-table-column>
                        <el-table-column
                                prop="end"
                                width="100"
                                label="结束时间">
                        </el-table-column>
                        <el-table-column
                                prop="end"
                                width="220"
                                label="缩略图">
                            <template slot-scope="scope">
                                <span v-if="!scope.row.img">暂无</span>
                                <el-image style="width: 200px;" :src="scope.row.img" fit="contain" :preview-src-list="[scope.row.img]"/>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="desc"
                                width="300"
                                label="描述">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
                                <el-button type="primary" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
                                <el-button type="primary" icon="el-icon-delete" @click="showLessonItem(scope.row)">查看课程内容</el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                </vue-scroll>
            </div>
            <div class="main-footer">
                <el-pagination
                        :current-page="page.page"
                        :page-sizes="[20, 50, 100]"
                        :page-size="page.rows"
                        layout="total,sizes,prev,pager,next,jumper"
                        background
                        :total="page.total"
                        @size-change="handleSizeChange"
                        @current-change="handlePageNumChange"
                />
            </div>
        </div>
        <el-dialog :visible.sync="formDataVisible" :title="dialogtitle"
                   top="40px" :close-on-click-modal="false" width="500px">
            <el-form ref="form" :model="formData" label-width="100px" label-suffix="：">
                <el-form-item label="课程名">
                    <el-input v-model="formData.name" placeholder="课程名"/>
                </el-form-item>
                <el-form-item label="课时">
                    <el-input-number v-model="formData.classtime"/>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker
                            v-model="formData.start"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="课程名">
                    <el-date-picker
                            v-model="formData.end"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="缩略图">
                    <el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false">
                        <el-button size="small" type="primary">选择图片上传,最多上传一张图片</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input
                            type="textarea"
                            :rows="2"
                            v-model="formData.desc"
                            placeholder="选择日期">
                    </el-input>
                </el-form-item>

            </el-form>

            <div>
                <el-button @click="formDataVisible=false;">取消</el-button>
                <el-button type="primary" @click="submitEvent">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="lessonItemFromVisible" :title="formData.name"
                   top="40px" :close-on-click-modal="false" width="500px">
            <el-form ref="form" :model="lessonItem" label-width="100px" label-suffix="：">
                <el-form-item label="课程名">
                    <el-input v-model="lessonItem.name" placeholder="课程名"/>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input
                            type="textarea"
                            :rows="2"
                            v-model="lessonItem.description"
                            placeholder="选择日期">
                    </el-input>
                </el-form-item>

            </el-form>

            <div>
                <el-button @click="lessonItemFromVisible=false;">取消</el-button>
                <el-button type="primary" @click="submitLessonItemEvent">确定</el-button>
            </div>
        </el-dialog>


        <el-dialog :visible.sync="lessonItemVisible" :title="formData.name"
                   top="40px" :close-on-click-modal="false" width="1100px">
            <vue-scroll>
                <el-button type="primary" icon="el-icon-edit" @click="addLessonItem(formData)">增加课程内容</el-button>
                <el-table
                        :data="formData.lessonitems"
                        border
                        style="width: 100%;max-width:1600px;height: 100%;padding: 15px 20px;border-radius: 5px;box-shadow: 1px 1px 5px #ccc;">
                    <el-table-column
                            type="index"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="课时名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="description"
                            width="300"
                            label="描述">
                    </el-table-column>
                    <el-table-column
                            width="400"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="editlessonItem(scope.row)">编辑</el-button>
                            <el-button type="primary" icon="el-icon-delete" @click="dellessonItem(scope.row)">删除</el-button>
                            <el-button type="primary" icon="el-icon-delete" @click="showLessonItemMeida(scope.row)">查看媒体文件</el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </vue-scroll>
        </el-dialog>
        <el-dialog :visible.sync="lessonItemMediaVisible" :title="lessonItem.name"
                   top="40px" :close-on-click-modal="false" width="550px">
            <vue-scroll>
                <el-upload
                        ref="upload"
                        style="display: inline-block;"
                        class="upload-demo"
                        action=""
                        :http-request="(file)=>doUpload(file,lessonItem)"
                        :file-list="fileList"
                        :show-file-list="false"
                >
                    <el-button size="small" type="primary">上传文件</el-button>
                </el-upload>
                <el-table
                        :data="lessonItem.lessonmedias"
                        border
                        style="width: 100%;max-width:1600px;height: 100%;padding: 15px 20px;border-radius: 5px;box-shadow: 1px 1px 5px #ccc;">
                    <el-table-column
                            type="index"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="文件名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            width="200"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-delete" @click="delLessonMedia(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </vue-scroll>
        </el-dialog>
    </div>
</template>

<script>
    import lessonApi from "../../api/lessonApi";
    import commonMethod from "../../util/commomMethods";

    export default {
        name: "listinfo",
        data() {
            return {
                lessonItemMediaVisible:false,
                lessonItemFromVisible:false,
                lessonItemVisible:false,
                dialogtitle:"",
                formDataVisible:false,
                tableData: [],
                page: {page: 1, rows: 20, total: 0},
                formData:{id:'',name:"",desc:"",start:"",end:"",img:"",list:"",classtime:0,lessonitems:[]},
                lessonItem:{},

                progressStatue: false,
                percentage: 0,
                fileList: [],
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.loadData();
            },
            loadData(){
                const {page, rows} = this.page
                lessonApi.getList("","",page,rows).then(res=>{
                    this.tableData=res.data.rows;
                    this.page.total = res.data.total
                }).catch(error=>this.$message.error(error));
            },
            del(row){
                this.$confirm('是否删除', '删除').then(() => {
                    lessonApi.deleteItem(row.id).then(res=>{
                        if(res.data.status.toLowerCase()=='ok'){
                            this.$message.success("删除成功");
                        }else{
                            this.$message.success("删除失败");
                        }
                        this.loadData();
                    }).catch(error=>{
                        this.$message.success("删除失败");
                        this.loadData();
                    })
                })
            },
            edit(data){
                this.formData = data;
                this.formDataVisible = true;
            },
            add(){
                this.formData = {id:'',name:"",desc:"",start:"",end:"",img:"",list:"",classtime:0,lessonitems:[]}
                this.formDataVisible = true;
            },
            handleSizeChange(val) {
                this.page.rows = val
                this.page.page = 1
                this.loadData()
            },
            handlePageNumChange(val) {
                this.page.page = val
                this.loadData()
            },
            submitEvent(){
                if(this.formData.start){
                    this.formData.start = commonMethod.formatDate2(this.formData.start);
                }
                if(this.formData.end){
                    this.formData.end = commonMethod.formatDate2(this.formData.end);
                }
              lessonApi.addItem(this.formData).then(res=>{
                  if(res.data.status.toLowerCase()==='ok'){
                      this.$message.success("添加成功");
                  }else{
                      this.$message.success("添加失败");
                  }

                  this.formDataVisible = false;
                  this.loadData();
              }).catch(error=> {
                  this.$message.success("添加失败");
                  this.loadData();
                  this.formDataVisible = false;
              })
            },
            getFile(file) {

                this.getBase64(file.raw).then(res => {
                    this.formData.img = res;
                });
            },
            getBase64(file) {
                return new Promise(function(resolve, reject) {
                    let reader = new FileReader();
                    let imgResult = "";
                    reader.readAsDataURL(file);
                    reader.onload = function() {
                        imgResult = reader.result;
                    };
                    reader.onerror = function(error) {
                        reject(error);
                    };
                    reader.onloadend = function() {
                        resolve(imgResult);
                    };
                });
            },
            showLessonItem(lesson){
                this.formData = lesson;
                this.lessonItemVisible=true;
            },
            editlessonItem(lessonItem){
                this.lessonItem = lessonItem;
                this.lessonItemFromVisible = true;
            },
            addLessonItem(lesson){
                this.lessonItemFromVisible = true;
                this.lessonItem = {pid:lesson.id};
            },
            submitLessonItemEvent(){
                lessonApi.addLessonItem(this.lessonItem).then(res=>{
                    if(res.data.status.toLowerCase()==='ok'){
                        this.$message.success("添加成功");
                    }else{
                        this.$message.success("添加失败");
                    }
                    this.formData = res.data.data;
                    this.lessonItemFromVisible = false;
                    this.loadData();
                }).catch(error=> {
                    this.$message.success("添加失败");
                    this.loadData();
                    this.lessonItemFromVisible = false;
                })
            },
            dellessonItem(lessonItem){
                this.$confirm('是否删除', '删除').then(() => {
                    lessonApi.deleteLessonItem(lessonItem.id).then(res=>{
                        if(res.data.status.toLowerCase()=='ok'){
                            this.$message.success("删除成功");
                        }else{
                            this.$message.success("删除失败");
                        }
                        this.formData = res.data.data;
                        this.loadData();
                    }).catch(error=>{
                        this.$message.success("删除失败");
                        this.loadData();
                    })
                })
            },
            showLessonItemMeida(lessonItem){
                this.lessonItemMediaVisible = true;
                this.lessonItem = lessonItem;
            },
            delLessonMedia(lessonmedia){
                this.$confirm('是否删除', '删除').then(() => {
                    lessonApi.deleteLessonMedia(lessonmedia.id).then(res=>{
                        if(res.data.status.toLowerCase()=='ok'){
                            this.$message.success("删除成功");
                        }else{
                            this.$message.success("删除失败");
                        }
                        this.lessonItem = res.data.data;
                        this.loadData();
                    }).catch(error=>{
                        this.$message.success("删除失败");
                        this.loadData();
                    })
                })
            },



            //上传相关
            doUpload(file,row) {
                let that = this;
                this.percentage = 0;
                this.progressStatue = true;
                let formData = new FormData();
                formData.append("lessonitem", row.id)
                formData.append("file", file.file)

                this.$refs.upload.clearFiles();
                lessonApi.uploadFile(formData,progressEvent => {
                    this.percentage = (progressEvent.loaded / progressEvent.total * 100 | 0);
                }).then(res => {
                    that.loadData();
                    this.lessonItem = res.data.data;
                    let message = '文件上传成功。'
                    if(res.message && res.message.indexOf("null") === -1){
                        message += res.message;
                    }
                    this.percentage = 100;
                    this.$message({
                        message: message,
                        type: 'success'
                    });

                }).catch(error=>this.$message.error(error.message))
                    .finally(()=>{this.progressStatue = false;})
            },
        }
    }
</script>

<style>
    .header {
        height: 60px;
        width: 100%;
    }

    .main {
        height: calc(100% - 180px);
    }

    .table {
        width: calc(100% - 40px);
        height: calc(100% - 60px);
    }

    .main-footer {
        height: 40px;
        width: 100%;
    }
</style>